<script setup>

import {ref, onMounted, watch, computed} from 'vue';
import axios from "axios";
import { message } from 'ant-design-vue';

// 查询
const pageSize = ref(10);
const pageNo = ref(1)
const items = ref([]);
const loading = ref(true);
const confirmLoading = ref(false);
const totalItems = ref(0);
const pagination = computed(() => ({
    total: totalItems.value,
    current: pageNo.value,
    pageSize: pageSize.value
})) 
const columns = ref([
    {
        title: "ID",
        dataIndex: "roleId",
        key: 'roleId'
    },
    {
        title: "名称",
        dataIndex: "roleName",
        key: 'roleName'
    },
    {
        title: "操作",
        dataIndex: "action"
    }
])
const open = ref(false);
const title = ref("");
const formData = ref({});

function loadItems({page, itemsPerPage}) {
    loading.value = true;
    pageNo.value = page
    pageSize.value = itemsPerPage
    axios.post('/Role/getRoleList', {
        page: page,
        pageSize: itemsPerPage
    }).then(({data}) => {
        items.value = data.data.records;
        totalItems.value = data.data.total;
        loading.value = false;
    })
}

const menuList = ref([]);
const fieldNames = ref({
    children: 'children',
    label: 'menuName',
    value: 'permissionId'
})
onMounted(() => {
    loadItems({page: 1, itemsPerPage: pageSize.value});
    axios.post("/Permission/getPermissionTreeList", {}).then(val => {
        menuList.value = val.data.data
    })
});

const dialogEnum = {
    update: "编辑",
    create: "新增"
}
function openRole() {
    open.value = true
    title.value = dialogEnum.create
    formData.value = {
        roleName: "",
        permissionIds: []
    }
}

function openData(data) {
    open.value = true
    title.value = dialogEnum.update
    formData.value = data
    formData.value.permissionIds = data.permissionIds.split(",").map(item => Number(item))
}

function submit() {
    let arr = []
    menuList.value.forEach(item => {
        item.children.forEach(k => {
            k.children.forEach(i => {
                formData.value.permissionIds.forEach(id => {
                    if(id == i.permissionId) {
                        formData.value.permissionIds.push(i.parentId)
                    }
                })
            })
        })
    })
    menuList.value.forEach(item => {
        item.children.forEach(k => {
            formData.value.permissionIds.forEach(id => {
                if(id == k.permissionId) {
                    formData.value.permissionIds.push(k.parentId)
                }
            })
        })
    })
    formData.value.permissionIds = Array.from(new Set(formData.value.permissionIds))
    if(title.value == dialogEnum.create) {
        confirmLoading.value = true
        axios.post("/Role/addRole", formData.value).then(res => {
            if(res.data.code == 0) {
                message.success('新增成功！')
                confirmLoading.value = false;
                open.value = false;
                loadItems({page: 1, itemsPerPage: pageSize.value});
            } else {
                confirmLoading.value = false;
                message.error(res.data.message)
            }
        }, err => {
            confirmLoading.value = false;
            message.error(err.data.message)
        })
    } else if(title.value == dialogEnum.update) {
        confirmLoading.value = true
        axios.post("/Role/updateRole", formData.value).then(res => {
            if(res.data.code == 0) {
                message.success('修改成功！')
                confirmLoading.value = false;
                open.value = false;
                loadItems({page: 1, itemsPerPage: pageSize.value});
            } else {
                confirmLoading.value = false;
                message.error(res.data.message)
            }
        }, err => {
            confirmLoading.value = false;
            message.error(err.data.message)
        })
    }
}

function deleteRole(item) {
    axios.post("/Role/deleteRole", {roleId: item.roleId}).then(res => {
        if(res.data.code == 0) {
            message.success('删除成功！')
            loadItems({page: 1, itemsPerPage: pageSize.value});
        } else {
            message.error(res.data.message)
        }
    }, err => {
        message.error(err.data.message)
    })
}

function handleTabChange(pag){
    loadItems({page: pag.current, itemsPerPage: pag.pageSize})
}

</script>

<template>
    <a-spin size="large" :spinning="loading">
        <a-card title="角色管理">
            <template #extra>
                <a-button type="primary" @click="openRole">新增角色</a-button>
            </template>
            <a-table :dataSource="items" :columns="columns" :pagination="pagination" @change="handleTabChange">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex == 'action'">
                        <a @click="openData(record)">修改</a>
                        <span>&nbsp;&nbsp;</span>
                        <a-popconfirm
                        title="确认删除该角色？"
                        okText="确认"
                        cancelText="取消"
                        @confirm="deleteRole(record)">
                            <a>删除</a>                        
                        </a-popconfirm>
                    </template>
                </template>
            </a-table>
        </a-card>

        <a-modal
        v-model:open="open"
        :title="title"
        cancelText="关闭"
        okText="确定"
        :confirmLoading="confirmLoading"
        @ok="submit">
            <a-form
            :colon="false"
            :label-col="{ span: 5 }"
            :model="formData">
                <a-form-item
                label="角色名称"
                :rules="[{ required: true, message: '请输入角色名称！' }]">
                    <a-input
                    v-model:value="formData.roleName"
                    placeholder="请输入角色名称"></a-input>
                </a-form-item>
                <a-form-item
                label="角色权限">
                    <a-tree-select
                    v-model:value="formData.permissionIds"
                    style="width: 100%;"
                    :tree-data="menuList"
                    :field-names="fieldNames"
                    :max-tag-count="10"
                    tree-checkable
                    allow-clear
                    tree-node-filter-prop="menuName"
                    placeholder="请选择角色权限"
                    ></a-tree-select>
                </a-form-item>
            </a-form>
            <template #footer>
                <a-button type=primary style="color:#fff;" @click="submit" :loading="confirmLoadingAdd">确定</a-button>
            </template>
        </a-modal>
    </a-spin>
</template>

<style scoped lang="less">

</style>
